'use client';

import { useState, useCallback } from 'react';
import Image from 'next/image';

export default function CardPreview({ card, onClick, isSelected, onShowDetail, onHideDetail }) {
  const [mousePosition, setMousePosition] = useState(null);

  const handleMouseEnter = useCallback((e) => {
    const rect = e.currentTarget.getBoundingClientRect();
    const x = rect.right;
    const y = Math.min(Math.max(rect.top + rect.height / 2, 100), window.innerHeight - 100);
    setMousePosition({ x, y });
    onShowDetail?.(card, { x, y });
  }, [card, onShowDetail]);

  const handleMouseLeave = useCallback(() => {
    setMousePosition(null);
    onHideDetail?.();
  }, [onHideDetail]);
  return (
    <div
      onClick={() => onClick?.(card)}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      className={`border rounded-lg cursor-pointer transition-all duration-200 shadow-sm hover:shadow-md ${isSelected ? 'bg-blue-50 border-blue-500' : 'hover:bg-gray-50 border-gray-200'}`}
    >
      <div className="p-4">
        <div className="flex justify-between items-center mb-3">
          <div className="flex items-center bg-gray-100 px-2 py-1 rounded">
            <span className="text-sm font-medium text-gray-600">费用:</span>
            <span className="ml-1 text-blue-600 font-bold">{card.cost}</span>
          </div>
          <div className="flex items-center bg-gray-100 px-2 py-1 rounded">
            <span className="text-sm font-medium text-gray-600">战力:</span>
            <span className="ml-1 text-red-600 font-bold">{card.power}</span>
          </div>
        </div>
        
        <h3 className="text-lg font-bold text-gray-900 mb-3">{card.name}</h3>
        
        <div className="aspect-square bg-gray-200 rounded-lg overflow-hidden mb-3">
          {card.image ? (
            <Image
              src={card.image}
              alt={`英雄卡牌：${card.name}，战力：${card.power}，费用：${card.cost}`}
              width={300}
              height={300}
              className="w-full h-full object-cover"
            />
          ) : (
            <Image
              src="/pic/7.png"
              alt={`英雄卡牌：${card.name}，战力：${card.power}，费用：${card.cost}`}
              width={300}
              height={300}
              className="w-full h-full object-cover"
            />
          )}
        </div>

        {card.balance && (
          <div className="text-sm text-gray-500">
            拥有数量: {card.balance}
          </div>
        )}
      </div>
    </div>
  );
}